<template>
    <div>
       <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/management' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>住房管理</el-breadcrumb-item>
            <el-breadcrumb-item>信息查询</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card>
            <el-table :data="houseList" stripe :header-cell-style="{backgroundColor:'#f3f3f5'}">
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="houseName" label="房间名称"></el-table-column>
                <el-table-column prop="houseHolder" label="户主"></el-table-column>
                <el-table-column prop="houseHuXing" label="户型"></el-table-column>
                <el-table-column prop="houseOrientation" label="朝向"></el-table-column>
                <el-table-column prop="houseRent" label="租金"></el-table-column>
                <el-table-column prop="houseStructure" label="结构"></el-table-column>
                <el-table-column prop="houseArea" label="面积"></el-table-column>
                <el-table-column prop="houseState" label="空闲">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.houseState === '是'">是</el-tag>
                        <el-tag v-else type="warning">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="250px" label="操作">
                    <template slot-scope="scope">
                        <!-- 录入按钮 -->
                        <el-tooltip effect="dark" content="录入" placement="top" :enterable="false">
                            <el-button size="mini" type="success" icon="el-icon-download"></el-button>
                        </el-tooltip>
                        
                        <!-- 详情按钮 -->
                        <el-tooltip effect="dark" content="详情" placement="top" :enterable="false">
                            <el-button size="mini" type="info" icon="el-icon-search"></el-button>
                        </el-tooltip>
                        
                        <!-- 编辑按钮 -->
                        <el-button type="primary" icon="el-icon-edit" size="mini" ></el-button>
                        <!-- 删除按钮 -->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeHouse(scope.row.houseId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            houseList:[],
            houseForm:{
                //面积
                houseArea:'',
                buildId: 1
                
                // campusId: 1  校区
                // equipmentArray: (3) [1, 2, 3]  设备列表
                // floorId: 1  楼层
                // houseArea: 160  面积
                // houseCover: "http://39.100.38.230:8086/houseImage/20210318_15344817.jpg"  图片地址
                // houseCreateTime: "2021-03-18 07:34:48"  创建时间
                // houseDetail: "风景好，地理位置优越，安静"  描述
                // houseHolder: "xiaoMing"  持有者
                // houseHuXing: "平式"  户型
                // houseId: 2  房间id
                // houseMapArray: null    地图
                // houseName: "长盛景江" 房间名称
                // houseOrientation: "东南"  朝向
                // houseRent: 3000  租金
                // houseState: "是"  是否空闲
                // houseStructure: "四室一厅"  结构
                // houseType: 1  类型
                // username: "admin"   用户
            }
        }
    },
    created(){
        this.getHouseList()
    },
    methods: {
        
        // 获取房间信息
        async getHouseList(){
            await this.$http.post('house/getAllHouses').then(res=>{
                if(res.data.code !==1){
                    return this.$message.error('住房信息请求失败！'); 
                }else{
                    this.houseList = res.data.data;              
                }
            }).catch((err)=>{
                console.log(err);
            })
        },
        
        // 移除房间信息
        async removeHouse(houseId){
            console.log(houseId);
            await this.$http.delete(`/house/deleteHouse?&houseId=${houseId}`).then(res =>{
                console.log(res);
                if(res.data.code !==1){
                    return this.$message.error('住房信息删除失败!'); 
                }else{
                    this.getHouseList();
                }
            }).catch((err)=>{
                console.log(err);
            })
        }  
    }
    
}
</script>
